package com.example.myapplication.ui.components


import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.PlaceholderVerticalAlign
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun DailyTaskContent() {
    DailyTaskItem("文章学习", "10积分/每有效阅读一篇文章", "已获得50积分/每日上限100积分", 0.9f)
    DailyTaskItem("文章学习", "10积分/每有效阅读一篇文章", "已获得50积分/每日上限100积分", 1f)
}


// 每日任务item
@Composable
fun DailyTaskItem(title: String, subtitle: String, desc: String, percent: Float) {
    val inlineContentId = "inlineContentId"
    val _subtitle = buildAnnotatedString {
        append(subtitle)
        appendInlineContent(inlineContentId, "[icon]")
    }

    val inlineContent = mapOf(
        Pair(
            inlineContentId,
            InlineTextContent(
                Placeholder(
                    width = 14.sp,
                    height = 14.sp,
                    PlaceholderVerticalAlign.AboveBaseline
                )
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    modifier = Modifier.clickable {

                    })
            })
    )

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 12.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(modifier = Modifier.weight(7f)) {
            Text(text = title, fontSize = 16.sp, color = Color(0xff333333))
            // 让图标和文本处于一行
            Text(
                _subtitle,
                inlineContent = inlineContent,
                fontSize = 14.sp,
                color = Color(0xff333333)
            )
//            Row() {
//                Text(text = _subtitle, fontSize = 14.sp, color = Color(0xff333333))
//                Icon(imageVector = Icons.Default.Star, contentDescription = null)
//            }
            // 进度条
            Row(verticalAlignment = Alignment.CenterVertically) {
                // 进度条组件
                LinearProgressIndicator(
                    progress = percent,
                    modifier = Modifier.weight(3f),
                    color = Color(0xff149ee7),
                    backgroundColor = Color(0x33149ee7)
                )
                Text(
                    text = desc,
                    fontSize = 10.sp,
                    color = Color(0xff333333),
                    modifier = Modifier
                        .weight(7f)
                        .padding(horizontal = 8.dp)
                )
            }
        }
        OutlinedButton(
            modifier = Modifier
                .weight(3f)
                .padding(8.dp),
            onClick = { /*TODO*/ },
            colors = ButtonDefaults.outlinedButtonColors(contentColor = Color(0xffff5900)),
            border = if (percent >= 1f) ButtonDefaults.outlinedBorder else BorderStroke(
                1.dp,
                color = Color(0xffff5900)
            ),
            shape = CircleShape,
            enabled = (percent < 1f)
        ) {
            Text(text = "去学习")
        }
    }
}



